<template>
  <div>
    <el-page-header :icon="null" title="用户管理">
      <template #content>
        <span class="text-large font-600 mr-3"> 添加列表 </span>
      </template>
    </el-page-header>
    <!-- table start-->
    <el-card>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="index" label="#" header-align="center">
        </el-table-column>
        <!-- 用户名 -->
        <el-table-column prop="username" label="用户名" header-align="center">
        </el-table-column>
        <!-- 用户头像 -->
        <el-table-column label="头像" header-align="center">
          <template #default="scope">
            <div v-if="scope.row.avatar">
              <el-avatar :size="50" :src="'http://127.0.0.1:3007/public' + scope.row.avatar"></el-avatar>
            </div>
            <div v-else>
              <el-avatar :size="50" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"></el-avatar>
            </div>
          </template>
        </el-table-column>
        <!-- 角色 -->
        <el-table-column label="角色" header-align="center">
          <template #default="scope">
            <el-tag v-if="scope.row.role === 1" type="success">管理员</el-tag>
            <el-tag v-else type="danger">编辑</el-tag>
          </template>
        </el-table-column>
        <!-- 操作 -->
        <el-table-column label="操作" header-align="center">
          <template #default="scope">
            <el-button type="primary" plain @click="handleEdit(scope.row)">编辑</el-button>
            <el-popconfirm title="您确定删除用户吗？" confirm-button-text="确定" cancel-button-text="取消"
              @confirm="handleDelete(scope.row)">
              <template #reference>
                <el-button type="danger" plain>删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- table end-->

    <!-- 编辑用户 -->
    <el-dialog title="编辑用户" v-model="dialogVisible" width="50%">
      <el-form ref="userFormRef" :model="userForm" :rules="userFormRules" label-width="80px" class="demo-ruleForm"
        status-icon>
        <!-- 用户名 -->
        <el-form-item label="用户名" prop="username">
          <el-input v-model="userForm.username" />
        </el-form-item>

        <!-- 用户密码 -->
        <el-form-item label="用户密码" prop="password">
          <el-input type="password" autocomplete="off" v-model="userForm.password" />
        </el-form-item>

        <!-- 用户权限 -->
        <el-form-item label="角色" prop="role">
          <el-select v-model="userForm.role" placeholder="select" style="width: 100%;">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

        <!-- 用户简介 -->
        <el-form-item label="简介" prop="introduction">
          <el-input v-model="userForm.introduction" type="textarea" />
        </el-form-item>

        <!-- 取消/确定 -->
        <el-form-item>
          <template #default="scope">
            <span class="dialog-footer">
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="handleEditConfirm()">确 定</el-button>
            </span>
          </template>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script setup>
import axios from 'axios'
import { ElMessage } from 'element-plus'
import { ref, reactive, onMounted } from 'vue'

const userFormRef = ref()

// dialog 框是否显示
const dialogVisible = ref(false)

const img = require('../../assets/logo.png')

// 编辑表单用户数据
const userForm = reactive({
  username: '',
  password: '',
  role: 2, // 1代表管理员 2代表编辑
  introduction: "",
})

// 编辑用户表单校验
const userFormRules = reactive({
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 10, message: '用户名长度大于3小于10', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入用户密码', trigger: 'blur' },
    { min: 3, max: 10, message: '用户密码长度大于3小于10', trigger: 'blur' }
  ],
  role: [{ required: true, message: '请选择权限', trigger: 'blur' }],
  intoduction: [{ required: true, message: '请输入简介', trigger: 'blur' }],
  avatar: [{ required: true, message: '请上传头像', trigger: 'blur' }]
})

// 定义校色数据
const options = [
  {
    label: '管理员',
    value: 1
  },
  {
    label: '编辑',
    value: 2
  }
]

const circleUrl = 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
// 用户列表数据渲染
const tableData = ref([])

// 用户列表
const getUser = () => {
  axios.get('/adminapi/user/getList').then((res) => {
    if (res.data.status === 0) {
      tableData.value = res.data.data
    } else {
      ElMessage.error('获取用户失败！')
    }
  })
}

// 生命周期函数
onMounted(() => {
  // 用户列表
  getUser()
})

// 编辑回调
const handleEdit = (data) => {
  dialogVisible.value = true
  userForm.id = data.id
  userForm.username = data.username
  // userForm.password = data.password
  userForm.role = data.role
  userForm.introduction = data.introduction
}

// 编辑确认回调
const handleEditConfirm = () => {
  userFormRef.value.validate((valid) => {
    if (valid) {
      axios.post(`/adminapi/user/editUser/${userForm.id}`, userForm).then((res) => {
        console.log(res)
      })
    }
  })
}


// 删除用户
const handleDelete = (data) => {
  axios.delete(`/adminapi/user/deleteUser/${data.id}`).then((res) => {
    if (res.data.status !== 0) {
      ElMessage.error('删除用户失败！')
    }
    ElMessage.success('删除用户成功！')
    // 刷新用户列表
    getUser()
  })
}
</script>

<style lang="scss" scoped>
.el-card {
  margin-top: 30px;
}

.el-table {
  text-align: center;
}
</style>